import { ref, h } from '../../lib/min-vue.esm.js'

export const App = {
  setup() {
    const props = ref({
      foo: 'foo',
      bar: 'bar'
    })
    const onChangeEdit = () => {
      props.value.foo = 'new-foo'
    }
    const onChangeNull = () => {
      props.value.foo = null
    }
    const onChangeShao = () => {
      props.value = { foo: 'foo' }
    }
    return {
      props,
      onChangeEdit,
      onChangeNull,
      onChangeShao
    }
  },
  render() {
    return h(
      'div',
      {
        ...this.props
      },
      [
        h('button', { onClick: this.onChangeEdit }, 'onChangeEdit'),
        h('button', { onClick: this.onChangeNull }, 'onChangeNull'),
        h('button', { onClick: this.onChangeShao }, 'onChangeShao')
      ]
    )
  }
}
